<template>
  <div class="record-list">
    <div v-if="props.loading" class="loading">加载中...</div>
    <div v-if="props.error" class="error">{{ props.error }}</div>
    
    <div 
      v-for="record in props.records" 
      v-else
      :key="record.id"
      class="record-item"
    >
      <i class="fas fa-file-alt record-icon"></i>
      <div class="record-details">
        <div class="record-name">{{ record.fileName }}</div>
        <div class="record-meta">
          <span>{{ formatDate(record.createTime) }}</span>
          <button 
            class="download-btn"
            @click.stop="downloadRecord(record.id)"
          >
            <i class="fas fa-download"></i> 批注文件下载
          </button>
          <button
              v-if="record.startExtractFilePath"
              class="download-btn"
              @click.stop="downloadStart(record.id)"
          >
            <i class="fas fa-download"></i> 星号条款下载
          </button>
          <button
              v-if="record.triangleExtractFilePath"
              class="download-btn"
              @click.stop="downloadTriangle(record.id)"
          >
            <i class="fas fa-download"></i> 技术参数下载
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { API_URL } from '../config/apiConfig'

const props = defineProps<{
  records: {
    id: string
    fileName: string
    createTime: string
    startExtractFilePath?: string
    triangleExtractFilePath?: string
  }[]
  loading: boolean
  error: string | null
}>()

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString()
}

const downloadRecord = (recordId: string) => {
  window.open(`${API_URL}/demo/compare-result/${recordId}/download`, '_blank')
}

const downloadStart = (recordId: string) => {
  window.open(`${API_URL}/demo/compare-result/${recordId}/start-file/download`, '_blank')
}

const downloadTriangle = (recordId: string) => {
  window.open(`${API_URL}/demo/compare-result/${recordId}/triangle-file/download`, '_blank')
}
</script>

<style scoped>
.record-list {
  padding: 10px;
}

.record-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.record-icon {
  font-size: 24px;
  color: #555;
  margin-right: 15px;
}

.record-details {
  flex: 1;
}

.record-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.record-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #777;
}

.download-btn {
  margin-left: 10px;
  padding: 4px 8px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.download-btn:hover {
  background-color: #e0e0e0;
}

.download-btn i {
  margin-right: 4px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error {
  text-align: center;
  padding: 20px;
  color: #dc3545;
}
</style>
